import { Avatar, Button, Space } from 'antd';
import React from 'react';


import styles from './index.module.less';

interface HeaderProps {
  userInfo?: {
    name?: string;
    avatar?: string;
    jobName?: string;
    organizationName?: string;
    locationName?: string;
  };
}

function UserInfoHeader(props: HeaderProps) {
  // const t = useLocale();
  const { userInfo } = props;
  if (!userInfo) return null;
  return (
    <div className={styles.header}>
      <Space size={8} direction="vertical" align="center">
        <Avatar size={64} >
          <img src={userInfo.avatar} />
        </Avatar>
        <div className={styles.username}>{userInfo.name}</div>
        <div className={styles['user-msg']}>
          <Space size={18}>
            <div>
           
              <span className={styles['user-msg-text']}>
                {userInfo.jobName}
              </span>
            </div>
            <div>
            
              <span className={styles['user-msg-text']}>
                {userInfo.organizationName}
              </span>
            </div>
            <div>
             
              <span className={styles['user-msg-text']}>
                {userInfo.locationName}
              </span>
            </div>
          </Space>
        </div>
        <Button
          type="primary"
          className={styles['user-edit-btn']}
          onClick={() => {
            window.location.href = '/user/setting';
          }}
        >
          sss
        </Button>
      </Space>
    </div>
  );
}

export default UserInfoHeader;